<template>
    <div class="teamplate-salesReceipts">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="biaoti" style="margin-right:100px;">
                        销售收款流水
                    </div>
                    <div class="form-group">
                        <label class="">开始日期：</label>
                        <input type="text" class="form-control start-date" id="j_startDate">
                    </div>
                    <div class="form-group">
                        <label class="">结束日期：</label>
                        <input type="text" class="form-control end-date" id="j_endDate">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="onInquiry">查询</button>
                    </div>
                    <div class="btn-group pull-right">
                        <button  type="botton"  class="btn btn-default"  @click="onExport"> 导出表格</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="table-wrap">
                        <div class="table-box">
                            <table class="table table-striped tc">
                                <tbody>
                                    <tr>
                                       <th>单据编号</th>
                                       <th>流水号</th>
                                       <th>日期</th>
                                       <th>日间</th>
                                       <th>收款方式编号</th>
                                       <th>收款方式名称</th>
                                       <th>收款员</th>
                                       <th>收款金额</th>
                                       <th>找零</th>
                                       <th>抹零</th>
                                    </tr>
                                    <tr v-for="(item,index) in mainBody">
                                        <td>{{item.djbh}}</td>
                                        <td>{{item.lshh}}</td>
                                        <td>{{item.rq}}</td>
                                        <td>{{item.ontime}}</td>
                                        <td>{{item.jsfsbh}}</td>
                                        <td>{{item.jsfsmch}}</td>
                                        <td>{{item.shky}}</td>
                                        <td>{{item.shkje}}</td>
                                        <td>{{item.zhaol}}</td>
                                        <td>{{item.moling}}</td>
                                     </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import bus from "../api/eventBus";
    import {
        setUi,
        setUserCode,
        setPopStatus
    } from "../vuex/actions";
    import {
        ui,
        userCode,
        popStatus
    } from "../vuex/getters";
    export default {
        components: {},
        data() {
            return {
                mainBody: {},
                title: '销售收款流水'
            };
        },
        watch: {},
        vuex: {
            getters: {
                ui,
                userCode,
                popStatus
            },
            actions: {
                setUi,
                setUserCode,
                setPopStatus
            }
        },
        methods: {
            check1(e) {
                let me = this;
                var a = /^(\d{4})-(\d{2})-(\d{2})$/;
                if (!a.test($(".stopDate").val())) {
                    layer.msg("日期格式不正确!");
                    return false;
                }
            },
            check2(e) {
                let me = this;
                var a = /^(\d{4})-(\d{2})-(\d{2})$/;
                if (!a.test($(".startDate").val())) {
                    layer.msg("日期格式不正确!");
                    return false;
                }
            },
            onInquiry(e) {
                //查询
                let me = this;
                me.onTableList();
            },
            onTableList(e) {
                let me = this;
                let res = {
                    fdbs: localStorage.getItem("fdbs"),
                    startDate: $("#j_startDate").val(),
                    endDate: $("#j_endDate").val(),
                    page: 1,
                    rows: 10
                };
                me.service.selectXSSKLSMX(me, res, data => {
                    me.mainBody = data.data.lists;
                });
            },
            onExport(e) {
                let me = this;
                var downloadToken = +new Date();
                var _self = this;
                var url = me.cfg.api + '/frontMonitor/selectXSSKLSMXDY?file=' + me.title + '&title=' + me.title + '&fdbs=' + me.fdbs + '&startDate=' + $('#j_startDate').val() + '&endDate=' + $('#j_endDate').val();
                var obj = {
                    time: downloadToken,
                    url: url,
                    _self: _self,
                }
                exportExcelForm(obj);
            },
        },
        mounted() {
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            console.log(me.fdbs, "分店表示");
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 14;
            } else if (winHeight <= 800) {
                me.row = 16;
            } else if (winHeight <= 863) {
                me.row = 20;
            } else {
                me.row = 22;
            }
            let time = new Date();
            let startTimes =
                time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + "01"; //默认开始日期
            let endTimes =
                time.getFullYear() +
                "-" +
                (time.getMonth() + 1) +
                "-" +
                me.util.string.numFix(time.getDate()); //默认结束日期
            $("#j_startDate").val(startTimes);
            $("#j_endDate").val(endTimes);

            $(".start-date,.end-date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd",
                defaultDate: new Date()
            });
            me.onTableList();
        }
    };
</script>